<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <style>
        .t1 {
            margin-top: 20px;
            margin-left: 10px;
            font-size: 14px;
            width: 100%;
        }

        td, th {
            width: 15%;
            text-align: center;
        }

        .form-group .form-control {
            width: 173px !important;
        }

        .btn_search {
            margin-left: 20px;
        }

        .div_pagination {
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">用户数据列表</div>
    <div class="panel-body">
        <!-- 模糊查询条件 -->
        <form id="myForm" class="form-inline input-sm" name="form1" action="${pageContext.request.contextPath}/user?type=userList"
              method="post" autocomplete="off">
            <input type="hidden" name="pageNum" value="1" id="pageNum">
            <div class="form-group">
                <label for="userName">姓名</label>
                <input type="text" id="userName" name="userName" class="form-control input-sm" placeholder="请输入用户名"
                       value="${param.userName}">
            </div>
            <div class="form-group">
                <label for="roleId">角色</label>
                <select class="form-control input-sm" name="roleId" id="roleId">
                    <option value="">全部</option>
                    <c:forEach var="role" items="${sessionScope.roleList}">
                        <c:if test="${role.roleId != '1'}">
                            <option value="${role.roleId }">${role.roleName }</option>
                        </c:if>
                    </c:forEach>
                </select>
            </div>
            <button type="submit" class="btn btn-primary input-sm btn_search ">查询</button>
            <c:if test="${sessionScope.loginUser.role.roleId == 1}">
                <a href="user_add.jsp" type="button" class="btn btn btn-success input-sm btn_search ">添加用户</a>
            </c:if>
            <hr>
            <!-- 表格数据 -->
            <table class="table table-bordered table-hover t1">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>账号</th>
                    <th>手机号</th>
                    <th>邮箱</th>
                    <th>权限</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="userInfo" items="${requestScope.pageInfo.list }" varStatus="i">
                    <%--                    <c:if test="${userInfo.rno > user.r_no}">--%>
                    <tr>
                        <td>${userInfo.userId}</td>
                        <td>${userInfo.userName }</td>
                        <td>${userInfo.userTel }</td>
                        <td>${userInfo.userEmail}</td>
                        <td>${userInfo.role.roleName}</td>
                        <td>
                            <a onclick="delUser(${userInfo.userId})" type="button" class="btn btn-danger">删除</a>
                            <a href="${pageContext.request.contextPath}/user?type=detailUser&userId=${userInfo.userId}&roleId=${userInfo.role.roleId}"
                               type="button" class="btn  btn-warning">修改</a>
                        </td>
                    </tr>
                    <%--                    </c:if>--%>
                </c:forEach>
                </tbody>
            </table>
            <div class="div_pagination col-md-offset-3">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <c:choose>
                            <c:when test="${requestScope.pageInfo.hasPreviousPage}">
                                <li onclick="search(1)" class="page-item">
                                    <a class="page-link" href="#">首页</a>
                                        <%--                                    <a class="page-link"--%>
                                        <%--                                       href="${pageContext.request.contextPath}/user?type=userList&pageNum=1">首页</a>--%>
                                </li>
                                <li onclick="search(${requestScope.pageInfo.pageNum-1})" class="page-item">
                                    <a class="page-link" href="#">上一页</a>
                                        <%--                                    <a class="page-link"--%>
                                        <%--                                       href="${pageContext.request.contextPath}/user?type=userList&pageNum=${requestScope.pageInfo.pageNum-1}">上一页</a>--%>
                                </li>
                            </c:when>
                            <c:otherwise>
                                <li class="page-item disabled"><span class="page-link">首页</span></li>
                                <li class="page-item disabled"><span class="page-link">上一页</span></li>
                            </c:otherwise>
                        </c:choose>
                        <c:choose>
                            <c:when test="${requestScope.pageInfo.hasNextPage }">
                                <li onclick="search(${requestScope.pageInfo.pageNum+1})" class="page-item">
                                    <a class="page-link" href="#">下一页</a>
                                        <%--                                    <a class="page-link"--%>
                                        <%--                                       href="${pageContext.request.contextPath}/user?type=userList&pageNum=${requestScope.pageInfo.pageNum+1}">--%>
                                        <%--                                        下一页--%>
                                        <%--                                    </a>--%>
                                <li onclick="search(${requestScope.pageInfo.pages})" class="page-item">
                                    <a class="page-link" href="#">尾页</a>
                                        <%--                                    <a class="page-link"--%>
                                        <%--                                       href="${pageContext.request.contextPath}/user?type=userList&pageNum=${requestScope.pageInfo.pages}">--%>
                                        <%--                                        尾页--%>
                                        <%--                                    </a>--%>
                                </li>
                            </c:when>
                            <c:otherwise>
                                <li class="page-item disabled"><span class="page-link">下一页</span></li>
                                <li disabled class="page-item disabled"><span class="page-link">尾页</span></li>
                            </c:otherwise>
                        </c:choose>
                    </ul>
                </nav>
                共 ${requestScope.pageInfo.total } 条， 当前 ${requestScope.pageInfo.pageNum }
                / ${requestScope.pageInfo.pages } 页
            </div>
        </form>

    </div>
</div>

<script>

    $(function(){
        $("#roleId").find("option[value='${param.roleId}']").prop("selected","selected");
    })

    let search = function (pageNum) {
        $("#pageNum").val(pageNum);

        $("#myForm").submit();
        // window.location.href = "/user?type=userList&pageNum=" + pageNum;
    }

    // 删除用户
    let delUser = function (userId) {
        if (window.confirm("您真的确定删除么？")) {
            window.location.href = "/user?type=delUser&userId=" + userId;
        }
    }
</script>

</body>
</html>